<template>
  <div class="main">
    <div class="login-form">
      <top class="top" :massage="massage"></top>
      <login @input="input"></login>
      <btn :massage="massage" @login="login"></btn>
    </div>
    <div class="register-form">

    </div>
  </div>
</template>

<script>
  import top from "./components/top";
  import login from "./components/login";
  import btn from "./components/btn";

  export default {
    name: 'App',
    components: {
      top,
      login,
      btn
    },
    data: function () {
      return {
        massage: 'login',
        name: '',
        password: ''
      }
    },
    methods: {
      login: function () {
        this.$axios.get('http://127.0.0.1:8000/api',).then(res => {
          alert(res.data)
        })

        if (this.name === 'zyd' && this.password === '123') {
          console.log('登录成功!!')
        } else {
          console.log('登录失败!!')
        }
      },
      input: function (name, password) {
        this.name = name
        this.password = password
      }
    }
  }

</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(../static/1.jpeg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .main > .login-form {
    height: 400px;
    width: 400px;
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .top {
    position: relative;
    top: -30px;
  }

</style>
